<template>
	<view class="content">
		<scroll-view class="scroll-view" scroll-y refresher-enabled :refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh" @refresherrestore="onRefreshRestore">

			<view v-if="isScanning" class="loading-more">
				<view class="loading-text">正在扫描蓝牙设备...</view>
			</view>

			<view class="device-list">
				<view v-if="allDevices.length === 0" class="no-device">
					<text>暂无可用设备，下拉刷新扫描蓝牙</text>
				</view>

				<view v-else class="devices-wrapper">
					<view v-for="(device, index) in allDevices" :key="device.deviceId" class="device-card"
						:class="{ 'connected': isDeviceConnected(device) }" @click="handleDeviceClick(device)">
						<view class="device-info">
							<text class="device-name">{{ device.name || '未知设备' }}</text>
							<text class="device-id">MAC: {{ device.deviceId }}</text>
							<text class="device-rssi" :data-rssi="device.RSSI">信号强度: {{ device.RSSI || '--' }}dBm</text>
						</view>
						<view v-if="isDeviceConnected(device)" class="connection-status">
							<text class="status-text">已连接</text>
						</view>
						<view v-else class="connection-indicator">
							<text class="tap-to-connect">点击连接</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import { useBluetooth } from './hooks/useBluetooth';
import { ref, onMounted } from 'vue';
const {
	allDevices,
	isDeviceConnected,
	handleDeviceClick,
	refreshDeviceList,
	initialize,
	isScanning
} = useBluetooth();

// 下拉刷新状态
const isRefreshing = ref(false);


// 下拉刷新
const onRefresh = () => {
	isRefreshing.value = true;
	refreshDeviceList();

	// 1秒后停止刷新状态
	setTimeout(() => {
		isRefreshing.value = false;
	}, 1000);
};

// 刷新复位
const onRefreshRestore = () => {
	console.log('刷新复位');
};


onMounted(() => {

	initialize(
		() => {
			console.log('蓝牙初始化成功');
		},
		(error) => {
			// 初始化失败回调
			uni.showToast({
				title: '请打开蓝牙',
				icon: 'error',
				duration: 2000
			});
		}
	);
})

</script>

<style>
.content {
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f7fa;
	position: relative;
}

.header {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 30rpx;
	padding: 20rpx 0;
	position: relative;
	border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
}

.header::after {
	content: "";
	position: absolute;
	bottom: -2rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 4rpx;
	background-color: #409eff;
	border-radius: 4rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #303133;
	position: relative;
}

.title::before {
	content: "";
	display: inline-block;
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23409eff'%3E%3Cpath d='M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
	vertical-align: middle;
}

.scroll-view {
	flex: 1;
	height: calc(100vh - 100rpx);
	position: relative;
}

.loading-more {
	padding: 30rpx 0;
	text-align: center;
}

.loading-text {
	font-size: 28rpx;
	color: #409eff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
}

.loading-text::before {
	content: "";
	width: 30rpx;
	height: 30rpx;
	border: 3rpx solid #409eff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.device-list {
	padding: 10rpx;
}

.no-device {
	padding: 100rpx 0;
	text-align: center;
	color: #909399;
	font-size: 28rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.no-device::before {
	content: "";
	width: 120rpx;
	height: 120rpx;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
	opacity: 0.3;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0px);
	}
}

.devices-wrapper {
	padding: 10rpx;
}

.device-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	position: relative;
	transition: all 0.3s ease;
	border: 2rpx solid transparent;
	overflow: hidden;
}

.device-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 6rpx;
	height: 100%;
	background: #409eff;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.device-card:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
}

.device-card.connected {
	background: linear-gradient(135deg, #ecf5ff 0%, #e6f7ff 100%);
	border-color: #a0cfff;
}

.device-card.connected::before {
	opacity: 1;
}

.device-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.device-name {
	font-size: 32rpx;
	color: #303133;
	font-weight: 600;
}

.device-id {
	font-size: 24rpx;
	color: #909399;
	font-family: monospace;
}

.device-rssi {
	font-size: 24rpx;
	color: #909399;
	display: flex;
	align-items: center;
	gap: 6rpx;
}

.device-rssi::before {
	content: "";
	width: 24rpx;
	height: 24rpx;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M2 22h20V2z M17 7L2 22h15z M4.95 19.05L9 15l4.95 4.05z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
}

.device-rssi[data-rssi^="-9"]::before,
.device-rssi[data-rssi^="-8"]::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4d4f'%3E%3Cpath d='M2 22h20V2z M17 7L2 22h15z M4.95 19.05L9 15l4.95 4.05z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
}

.device-rssi[data-rssi^="-7"]::before,
.device-rssi[data-rssi^="-6"]::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23faad14'%3E%3Cpath d='M2 22h20V2z M17 7L2 22h15z M4.95 19.05L9 15l4.95 4.05z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
}

.device-rssi[data-rssi^="-5"]::before,
.device-rssi[data-rssi^="-4"]::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352c41a'%3E%3Cpath d='M2 22h20V2z M17 7L2 22h15z M4.95 19.05L9 15l4.95 4.05z'%3E%3C/path%3E%3C/svg%3E") no-repeat center/contain;
}

.connection-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-left: 20rpx;
	position: relative;
}

.status-text {
	font-size: 24rpx;
	color: #409eff;
	background-color: rgba(64, 158, 255, 0.1);
	padding: 6rpx 16rpx;
	border-radius: 30rpx;
	position: relative;
}

.status-text::before {
	content: "";
	display: inline-block;
	width: 12rpx;
	height: 12rpx;
	background-color: #409eff;
	border-radius: 50%;
	margin-right: 8rpx;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.7);
	}
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10rpx rgba(64, 158, 255, 0);
	}
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
	}
}

.connection-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tap-to-connect {
	font-size: 24rpx;
	color: #909399;
	background-color: #f4f4f5;
	padding: 6rpx 16rpx;
	border-radius: 30rpx;
	transition: all 0.3s ease;
}

.device-card:hover .tap-to-connect {
	color: #409eff;
	background-color: rgba(64, 158, 255, 0.1);
}
</style>
